<template>
  <div id="app">
    <div id="boxFixed" class="header" v-show="flag" :class="{'headerFixed': isFixed}">
      <div class="header_left">手机参数对比平台</div>
      <div class="header_right">
        <!--        <span>搜索</span>-->
        <input type="text" class="search" placeholder="搜索">
        <span>对比车</span>
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/login">{{mess}}</router-link></span>
      </div>
    </div>
    <!--   返回顶部   -->
    <div class="BackTop" v-show="flag && isFixed" @click="backTop">
      Top
    </div>
    <!--    <img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data: function () {
      return {
        mess: '注销',
        flag: true,
        isFixed: false,
      }
    },
    created() {
      if (this.$route.path == '/') {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    mounted(){
      window.addEventListener('scroll',this.handleScroll)
    },
    methods: {
      GoLogin() {
        alert('12')
      },
      //滚动监听
      handleScroll(){
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滚动条偏移量
        let offsetTop = document.querySelector("#boxFixed").offsetTop;// 要滚动到顶部吸附的元素的偏移量
        this.isFixed = scrollTop > offsetTop ? true : false;  // 如果滚动到顶部了，this.isFixed就为true
      },
      //返回顶部
      backTop(){
        var timers = setInterval(function () {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滚动条偏移量
          var speedBack = scrollTop/5;
          document.documentElement.scrollTop = scrollTop - speedBack;
          if(scrollTop ==0){
            clearInterval(timers);
          }
        },30)
      }
    },
    watch: {
      '$route.path': function (path) {
        if (path == '/login') {
          this.flag = false;
        } else {
          this.flag = true;
        }
      }
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    text-decoration: none;
    border: 0;
    border:none;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e30;
    text-align: center;
    min-width: 1400px;
  }

  .header {
    width: 100%;
    height: 30px;
    background-color: blue;
  }
  .headerFixed{
    position: fixed;
    z-index: 1000;
  }

  .header_left {
    float: left;
    width: 70%;
    background-color: #6467b6;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
  }

  .header_right {
    float: right;
    width: 30%;
    background-color: yellow;
    height: 30px;
    line-height: 30px;
  }

  .search {
    padding: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: none;
  }

  .BackTop{
    width: 80px;
    height: 80px;
    background-color: brown;
    position: fixed;
    top: 600px;
    right: 10px;
    text-align: center;
    line-height: 80px;
    font-weight: bold;
    font-size: 20px;
  }
</style>
